<template>
    <div>
        <Card>
            <p slot="title">
                个人中心
            </p>
            <span slot="extra">
                <Button
                    type="primary"
                    @click="save"
                >保存</Button>
            </span>
            <Form
                :model="form"
                :label-width="120"
                label-position="right"
                :rules="checkPass"
            >
                <FormItem label="昵称:">
                    <Input
                        v-model="form.nick_name"
                        placeholder="昵称..."
                    ></Input>
                </FormItem>
                <FormItem
                    label="密码:"
                    class="resetRequired"
                    :class="{ 'resetFromErr': !pwd_check}"
                >
                    <Tag color="blue">修改时，填写则表示修改密码，不填则原来密码</Tag>
                    <Input
                        type="password"
                        v-model="form.password"
                    ></Input>
                    <div
                        v-if="!pwd_check"
                        class="ivu-form-item-error-tip"
                    >两次密码输入不一致！</div>
                </FormItem>
                <FormItem
                    v-if="form.password != ''"
                    label="确认密码:"
                    class="resetRequired"
                    :class="{ 'resetFromErr': !pwd_check}"
                >
                    <Input
                        type="password"
                        v-model="form.password_confirmation"
                    ></Input>
                    <div
                        v-if="!pwd_check"
                        class="ivu-form-item-error-tip"
                    >两次密码输入不一致！</div>
                </FormItem>
            </Form>
        </Card>
    </div>
</template>
<script>
import md5 from 'js-md5'
import { setStore, getStore, removeStore } from "@/config/storage.js"

export default {
    data() {
        return {
            checkPass: {
                nick_name: [
                    { required: true, message: '昵称不能为空！', trigger: 'blur' }
                ],
            },

            form: {
                nick_name: '',
                password_confirmation: '',
                password: ''
            }
        }

    },
    computed: {

        // 检查两次密码是否一致
        pwd_check() {
            return this.form.password === this.form.password_confirmation
        },
    },
    methods: {
        save() {
            let url = 'rbac/admin/center'
            this.$ajax.post(url, this.form)
                .then(res => {
                    if (!res.error_code) {
                        this.$Message.success('成功')
                        this.$store.commit('changeNickName', { nick_name: this.form.nick_name })
                        setStore("nick_name", this.form.nick_name)
                    } else {
                        this.$Message.warning('失败,请重试...')
                    }
                })
                .catch(err => console.log(err))
        }
    },
    mounted() {
        this.form.nick_name = getStore('nick_name')
    }
}
</script>
<style
    lang="less"
    scoped
>
</style>